<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page Title</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/minimum.css" media="screen and (max-width: 767px)">
    <link rel="stylesheet" type="text/css" href="css/min.css" media="screen and (min-width: 768px)">
    <link rel="stylesheet" type="text/css" href="css/medium.css" media="screen and (min-width: 922px)">
    <link rel="stylesheet" type="text/css" href="css/max.css" media="screen and (min-width: 1200px)">
    <link rel="stylesheet" type="text/css" href="css/shuffling.css">
    <script src="js/main.js"></script>
    <script src="js/shuffling.js"></script>
    <script>
        window.onload = function()
        {
            creatButtom();
            creatObjectContent();
            creatrecommendedContent();
            creatActiveContent();
            init_tabs();
        }
    </script>
    <script type="text/javascript" src="https://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.api.min.js"></script>
    <script type="text/javascript">
       $youziku.load("body", "da0906668e1549ada8947ba8fa21cbc4", "jdlibianjian");
       /*$youziku.load("#id1,.class1,h1", "da0906668e1549ada8947ba8fa21cbc4", "jdlibianjian");*/
       /*．．．*/
       $youziku.draw();
    </script>
    <style>
        body{
            overflow-x:hidden;
            margin: 0;
        }
        html{
            font-size:62.5%;
        }
    </style>
</head>
<body>
    <!-- mennue -->
    <div id="div_id_menue">
        <div id="div_id_topImg">
                <img src="img/menue.png" class="img_class_log">
                <i onclick="showMenue()" class="fa fa-bars iconStyle"styaria-hidden="true"></i>
                <i onclick="back()" class="fa fa-times iconStyle"></i>
        </div>
        <div class="div_class_nav">
        <ul>
            <li><a class="a_class_menueStyle" href="#home">首页</a></li>
            <li><a class="a_class_menueStyle" href="#home">整形项目<i class="fa fa-caret-down"></i></a>
                <ul>
                    <li><a  href="#home">整形美容</a></li>
                    <li><a  href="#home">美肤嫩肤</a></li>
                    <li><a  href="#home">无创美容</a></li>
                </ul>
            </li>
            <li><a class="a_class_menueStyle" href="#home">优惠活动</a></li>
            <li><a class="a_class_menueStyle" href="#home">专家团队</a></li>
            <li><a class="a_class_menueStyle" href="#home">整形动态</a></li>
            <li><a class="a_class_menueStyle" href="#home">关于我们</a></li>
            <li><a class="a_class_menueStyle" href="#home">联系我们</a></li>
        </ul>
        </div>
    </div>
    <!-- shuffling -->
    <div id="div_id_contain">
        <div class="slide-container">  
            <!-- 轮播组件  最后一个不用加right-out类-->  
            <div class="slide right-out">  
                <img src="img/homepic1.jpg"class="slide-img"> 
            </div>  
            <div class="slide">  
                <img src="img/homepic2.jpg" class="slide-img">  
            </div>
            <div id="div_shufflingShow">
            <div class="div_shufflingShadow" style="left:0;"></div>
                <i class="fa fa-angle-left" id="i_left"onclick="slide_last();"></i>
            <div  class="div_shufflingShadow" style="right:0"></div>
            <i class="fa fa-angle-right" id="i_right" onclick="slide_next()"></i>
           </div> 
            <!-- 导航点 -->  
            <div id="slide-tabs"></div>
        </div>
    </div>
    <!-- advantage -->
    <div id="div_id_advantageContain">
        <div class="div_class_style">
            <div class="div_class_title">
                    <h2 class="h2_class_title">
                            我们的优势
                    </h2>
                    <p class="p_class_title">our advantages</p>
            </div>
            <div id="div_class_advantage">
                <div class="div_class_advantageConnect">
                    <div class="div_class_img">
                        <img class="img_class_advantageStyle" src="img/advantage.jpg">
                    </div>
                    <div>
                        <h3 class="h3_class_advantageStyle">整形美容</h3>
                        <p class="p_class_advantageStyle">运用手术、药物、医疗器械以及其他医学技术..</p>
                        <div class="div_class_advantageFooter"></div>
                    </div>
                </div>
            </div> 
        </div>
    </div>
    <!-- object -->
    <div id="div_id_object">
        <div class="div_class_style">
            <div class="div_class_title">
                    <h2 class="h2_class_title">
                            王牌项目
                    </h2>
                    <p class="p_class_title">Project center</p>
            </div>
            <div id="div_id_objectButtom">
            </div>
            <div id="div_id_objectContect">    
            </div>
        </div>
    </div>
    <!-- recommended -->
    <div id="div_id_recommended">
        <div class="div_class_style">
            <div class="div_class_title">
                    <h2 class="h2_class_title">
                            名医推荐
                    </h2>
                    <p class="p_class_title">Experts recommend</p>
            </div>
            <div id="div_id_recommendedContect">
            </div>
        </div>
    </div>
    <!-- active -->
    <div id="div_id_active">
        <div class="div_class_style">
            <div class="div_class_title">
                <h2 class="h2_class_title">
                        热门活动
                </h2>
                <p class="p_class_title">Popular activities</p>
            </div>
            <div id="div_id_activeContect">
            </div>
        </div>
    </div>
    <!-- connect -->
    <div id="div_id_connect">
        <div id="div_class_connectStyle">
            <div class="div_class_contactConnect">
                <div>
                    <span id="span_id_connectFont">整形美容医院</span>
                    <span class="span_Class_connectFont">美丽热线：400-000-0000</span>
                    <span class="span_Class_connectFont">地址：中国地区XX分区人民中路88-66号</span>
                    <span class="span_Class_connectFont">邮箱：test@metinfo.cn</span>
                </div> 
            </div>
            <div id="div_class_contactRight">
                <div id="div_id_activeForm">
                    <form>
                        <input placeholder="姓名">
                        <input placeholder="联系电话">
                        <select id="select_connect" >
                            <option>咨询项目</option>
                            <option>减肥丰胸</option>
                            <option>眼部整形</option>
                            <option>面部轮廓</option>
                            <option>皮肤美容</option>
                        </select>
                        <textarea placeholder="留言"></textarea>
                        <input placeholder="验证码">
                        <button>预约</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- top -->
    <a class="fa fa-angle-up"href="#div_id_contain" id="a_id_style"></a>
</body>
</html>